<template>
    <view>
        <u-popup
            class="showPopup"
            v-model="showRule"
            :isTransparent="true"
            mode="center"
            :mask-close-able="false"
        >
            <view>
                <view class="newCustomWhite">
                    <scroll-view
                        :scroll-y="true"
                        class="newCustomList"
                    >
                        <view class="ruleTitle">活动规则</view>
                        <view class="rules">
                            <view
                                class="rule-item"
                                v-for="item in rules"
                                :key="item"
                                >{{ item }}</view
                            >
                        </view>
                    </scroll-view>
                </view>
            </view>
            <view class="closeIcon">
                <image
                    @click="onClose()"
                    class="advertisement-image"
                    src="@/static/x.png"
                ></image>
            </view>
        </u-popup>
    </view>
</template>

<script>
export default {
    name: 'activeRulePopup',
    props: {
        showRule: {
            type: Boolean,
            default: false,
        },
        rules: {
            type: Array,
            default: () => {
                return [];
            },
        },
    },
    data() {
        return {};
    },
    onLoad() {},
    methods: {
        onClose() {
            this.$emit('onClose');
        },
    },
};
</script>

<style lang="scss" scoped>
.newCustomList {
    max-height: 80vh;
    overflow: scroll;
    width: 80vw;
    border-radius: 24rpx;
    background-color: #000000;
    opacity: 0.7;
    color: #fff;
}
.closeIcon {
    margin-top: 50rpx;
    text-align: center;

    .advertisement-image {
        border-radius: 50%;
        border: 2px solid #fff;
        width: 40rpx;
        height: 40rpx;
    }
}
.ruleTitle {
    width: 100%;
    margin-top: 20rpx;
    text-align: center;
    font-weight: bold;
    font-size: 32rpx;
    // color: #e80d0d;
}
.rules {
    padding: 20rpx 35rpx;
}
.rule-item {
    word-break: break-all;
}
</style>
